<!-- 黑名单 -->
<template>
  <div id="Blacklist">
    <Head title="黑名单" BackType1="1"></Head>
    <div id="BlacklistMain">
      <nothing v-show="!hasBlack" nothing ="暂时没有黑名单人员"></nothing>
      <van-list
      v-show="hasBlack"
      class="BlacklistList"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad">
          <van-cell class="BlackBox BoxActive" v-for="(list,index) in lists" :id="list.id" :key="index" @click="gotoDetails(list.id)">
            <div class="BlackBoxList">
              <img :src="list.pic" alt="">
              <div class="BlacklistName overflow">{{list.nickname}}</div>
            </div> 
          </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
  import Head from '../components/Head';
  import nothing from '../components/nothing';
  import { List, Cell } from 'vant'
  export default {
    data(){
      return{
        lists:[],
        hasBlack: true,
        loading: false,
        finished: false,
        page: 1,
        totalNum: '',
        pageSize: 10,
      }
    },
    components:{
      Head,
      nothing,
      [List.name]:List,
      [Cell.name]:Cell,
    },
    mounted(){
      /**
      *  get  首次获取黑名单列表
      */
      let backIndextext = {
        page:this.page,
        pageSize:this.pageSize,
      }
      this.$get(urlConfig.backIndex,backIndextext)
      .then(res => {
        if(res.data.list.length ==0){
          this.hasBlack = false
        }else{
          let Arr = new Array();
          Arr = res.data.list
          for (let i=0; i<Arr.length; i++){
            this.lists.push(Arr[i].buser)
          }
          this.totalNum = res.data.total
          // 加载状态结束
          this.page += 1
        }
      })
    },
    methods:{
      onLoad() {
        setTimeout(() => {
          /**
          *  get  首次获取黑名单列表
          */
          let backIndextext = {
            page:this.page,
            pageSize:this.pageSize,
          }
          this.$get(urlConfig.backIndex,backIndextext)
            .then(res => {
            let Arr = new Array();
            Arr = res.data.list
            for (let i=0; i<Arr.length; i++){
              this.lists.push(Arr[i].buser)
            }
            this.totalNum = res.data.total
            // 加载状态结束
            this.loading = false;
            if(parseInt(this.totalNum)/this.pageSize > this.page){
              this.page += 1
            }else{
              this.finished = true;
            }
          })
        },1500)
      },
      gotoDetails(id){
        console.log(id)
        this.$router.push({path:'NewFriendInfo',query:
        {
          id: id,
        }})
        
      }
    }
  }
</script>

<style scoped lang="less">
  #Blacklist{
    #BlacklistMain{
      position: fixed;
      top: 98px;
      left: 0;
      bottom: 0;
      overflow-y:scroll;
      width: 750px;
      .BlacklistList{
        width: 750px;
        .BlackBox{
          padding: 0 0 0 30px !important;
          background: #fff;
          .BlackBoxList{
            border-bottom: 1px solid #eee;
            height: 120px;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            img{
              width:90px;
              height: 90px;
              border-radius: 45px;
              padding-right:30px; 
            }
            .BlacklistName{
              width: 570px;
              font-size: 28px;
            }
          }
          &:last-child .BlackBoxList{
            border-bottom:0;
          } 
        }
      }
    }
  }
</style>